import { Button, Form, Input, Select, TimePicker } from 'antd';
import moment from 'moment';
import React from 'react';

export default function SearchForm(props: any) {
  const { searchList, handleSearch, reset } = props;
  const getInput = ({ valueType, valueEnum }: any) => {
    if (valueEnum) {
      const { Option } = Select;
      let array: any[] = [];
      // for (const key in valueEnum) {
      //   array.push({
      //     value: key,
      //     label: valueEnum[key],
      //   });
      // }
      Object.keys(valueEnum).forEach((i: any) => {
        array = [...array, { value: i, label: valueEnum[i] }];
      });
      return (
        <Select style={{ width: '200px' }}>
          {array.map((item) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      );
    }
    switch (valueType) {
      // case 'date':
      //     return <DatePicker />;
      case 'datetime':
        return (
          <TimePicker
            style={{ width: '200px' }}
            defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
          />
        );
      default:
        return <Input style={{ width: '200px' }} />;
    }
  };
  return (
    <Form layout="inline" onFinish={handleSearch}>
      {searchList.map((item: any) => (
        <Form.Item key={item.dataIndex} label={item.title}>
          {getInput(item)}
        </Form.Item>
      ))}
      <Form.Item>
        <Button type="primary" htmlType="submit" style={{ marginRight: '20px' }}>
          查询
        </Button>
        <Button onClick={reset}>重置</Button>
      </Form.Item>
    </Form>
  );
}
